<template>
  <el-radio-group v-model="radioList" v-bind="$attrs" :label="groupLabel" @change="updateValue">
    <el-radio v-for="item in props.labelList" :label="item">{{ item }}</el-radio>
  </el-radio-group>
</template>

<script setup>
import { ref } from 'vue';
const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  label: {
    type: String,
    default: '单选框'
  },
  labelList: {
    type: Array,
    default: ['option1', 'option2']
  },
  modelValue: {
    type: String,
    default: ''
  }
})
const radioList = ref('option1')
const groupLabel = ref(props.label)

watch(() => props.modelValue, (val) => {
  radioList.value = val
}, {
  immediate: true
})

const updateValue = (val) => {
  emit('update:modelValue', val)
}

</script>

<style lang="scss" scoped></style>